
<template>
  <div style="height: 100vh; display: flex; align-items: center; justify-content: center; background-color: #0f9876">
    <div style="display: flex; background-color: white; width: 60%; border-radius: 5px; overflow: hidden">
      <div style="flex: 1">
        <img src="@/assets/imgs/logo.png"  style="width: 100%">
      </div>
      <div style="flex: 1;display: flex;align-items: center;justify-content: center;">
        <div style="flex: 1;display: flex;align-items: center;justify-content: center;">
          <el-form :model="user" :rules="rules" ref="loginRef" style="width: 80%">
            <div style="font-size: 20px;font-weight: bold;text-align: center;margin-bottom: 20px">
              欢迎登录后台管理系统
            </div >
            <el-form-item prop="username">
              <el-icon :size="20" ><User style="width: 1em; height: 1em;"/></el-icon>
              <spen style="width: 90%"><el-input size="medium" placeholder="请输入账号" v-model="user.username"></el-input></spen>
            </el-form-item>
            <el-form-item prop="password">
              <el-icon :size="20" ><Lock style="width: 1em; height: 1em;"/></el-icon>
              <spen style="width: 90%"><el-input  size="medium" show-password placeholder="请输入密码" v-model="user.password"></el-input></spen>
            </el-form-item>


            <el-form-item prop="captcha" style="display: flex; align-items: center;justify-content: center; width: 95%">
              <el-icon :size="20"><EditPen style="width: 1em; height: 1em;"/></el-icon>
                <spen style="width: 40%; flex: 1;"><el-input size="medium" placeholder="请输入验证码" v-model="user.captcha"></el-input></spen>
                <spen style="width: 40%; flex: 1;text-align:right;">
                  <ValidCode @update:value="updateCaptcha" />
<!--                <el-card class="valid-code-card" shadow="hover" >
                  <ValidCode @update:value="updateCaptcha" />
                </el-card>-->
              </spen>
            </el-form-item>


            <el-form-item>
              <el-button type="primary" style="width: 100%" @click="login">登录</el-button>
            </el-form-item>
            <div style="display: flex ">
              <div style="flex: 1">还没有账号？请<span style="color: #0f9876; cursor: pointer" @click="register">注册</span></div>
              <div style="flex: 1; text-align: right; color: #0f9876; cursor: pointer" @click="handleForgetPass">忘记密码</div>
            </div>
          </el-form>
        </div>
      </div>
    </div>
  </div>

  <el-dialog
      v-model="forgetPassDialogVis"
      title="忘记密码"
      width="30%"
  >
    <el-form :model="forgetUserForm" label-width="80px" style="padding-right: 20px">
      <el-form-item label="用户名" prop="用户名">
        <el-input v-model="forgetUserForm.username" auto-complete="off" placeholder="请输入用户名" ></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="手机号">
        <el-input v-model="forgetUserForm.phone" auto-complete="off" placeholder="请输入手机号" ></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" style="text-align: right;"  >
      <el-button @click="forgetPassDialogVis = false">取 消</el-button>
      <el-button type="primary" @click="resetPassword">确 定</el-button>
    </div>
  </el-dialog>

</template>

<script>

import ValidCode from "@/components/ValidCode.vue";
import {User, Lock, EditPen} from "@element-plus/icons-vue";
import request from "@/utils/request";
import {ElMessage} from "element-plus";

export default {
  name: "login",
  components: {
    User,
    Lock,
    EditPen,
    ValidCode
  },

  data(){
    return{
      forgetPassDialogVis:false,
      forgetUserForm:{
        username:'',
        phone:'',
      },
      user:{
        username:'',
        password:'',
        captcha:'',//表单里用户输入的值
      },
      captchaValue: '',// 验证码组件传过来的code
      rules: {
        username:[
          {required:true,message:'请输入账号',trigger:'blur'},
          {min:3,max:10,message:'长度在3到10个字符',trigger:'blur'}
        ],
        password:[
          {required:true,message:'请输入密码',trigger:'blur'},
          {min:3,max:10,message:'长度在3到10个字符',trigger:'blur'}
        ],
        captcha:[
          {required:true,message:'请输入验证码',trigger:'blur'},
        ]
      }
    };
  },
  mounted() {
  },
  methods:{
    updateCaptcha(value) {
      this.captchaValue = value.toLowerCase();
      console.log(this.captchaValue);
    },

    login(){

      this.$refs['loginRef'].validate((valid)=> {
        if (valid){
          // 在这里处理登录逻辑，验证验证码
          if (this.user.captcha.toLowerCase() === this.captchaValue) {
            // 验证码正确，继续登录逻辑
            console.log('验证码正确');
            request.post('/login', this.user).then(response => {
              console.log(response);
              if (response.code === 1) {
                // 登录成功
                ElMessage.success('登录成功');
                // 跳转到首页
                this.$router.push('/home');
                localStorage.setItem('honey-user', JSON.stringify(response.data)); // 将用户信息存储到本地存储中
              } else {
                // 登录失败
                ElMessage.error(response.msg);
              }

            }).catch(error => {
              console.log(error);
            })
            ;
          } else {
            // 验证码错误
            console.log('验证码错误');
            // 登录失败
            this.$message.error('验证码错误');
          }
        }
      })
    },

    register(){
      this.$router.push('/register');
    },

    resetPassword(){
      request.put('/password', this.forgetUserForm).then(response => {
        if (response.code === 1) {
          ElMessage.success('重置密码成功');
          this.forgetPassDialogVis = false;
        } else {
          ElMessage.error(response.msg);
        }
      })
    },
    handleForgetPass(){     //初始化表单
      this.forgetUserForm = {}
      this.forgetPassDialogVis = true
    },
  }
}
</script>

<style scoped>.valid-code-card {
  width: 100%;
  height: 33px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-align: right;
}
</style>